<script setup lang="ts">
import { Local } from '@/utils/storage';
import { onMounted, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { getSourceUrl } from '@/utils/request';

type UserInfoType = {
  username: string;
  sex: number;
  avatar: string;
  avatarSource: any;
}
const router = useRouter();
const state = reactive({
  userInfo: {} as UserInfoType
});
const clickLogout = () => {
  Local.clear();
  router.replace('/login');
};
onMounted(() => {
  state.userInfo = Local.get('userInfo');
})
</script>

<template>
  <div class="person-container h-calc">
    <div v-if="state.userInfo.avatar" class="avatar">
      <van-image round :src="getSourceUrl(state.userInfo.avatarSource)" width="6rem" height="6rem"/>
    </div>
    <van-cell-group>
      <van-cell title="姓名" :value="state.userInfo.username" />
      <van-cell title="性别" :value="state.userInfo.sex === 1 ? '男' : '女'" />
      <van-cell title="邮箱" :value="state.userInfo.email" />
      <van-cell title="电话" :value="state.userInfo.telephone" />
    </van-cell-group>
    <div class='logout-btn'>
      <van-button type="default" block @click='clickLogout'>退出登录</van-button>
    </div>
    <HlTabbar />
  </div>
</template>

<style scoped lang="scss">
  .person-container{
    padding: 20px 0;
    position: relative;
    .avatar{
     text-align: center;
    }
    .logout-btn{
      position: absolute;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
</style>
